<script setup lang='ts'>
import { useGetFactory, useGetFactoryInfo } from '@fl/api/man-api/enterprise-info-edit'
import { SearchTable } from '@fl/components'
import { inject, reactive, ref } from 'vue'

const supplierId: any = inject('supplierId')

const show = ref(false)
const tablePage = ref({
    currentPage: 1,
    pageSize: 10,
    total: 0,
})
const list = ref([])

const detailPage = ref({
    currentPage: 1,
    pageSize: 10,
    total: 0,
})
const detailList = ref([])
const activeId = ref()

const params = computed(() => {
    return {
        page: tablePage.value.currentPage,
        size: tablePage.value.pageSize,
        supplierId,
    }
})

const { data } = useGetFactory(params)

watchEffect(() => {
    if (data.value) {
        list.value = data.value?.records ?? []
        tablePage.value.total = data.value?.total ?? 0
    }
})

const gridOptions = reactive<any>({
    columns: [
        { title: '序号', type: 'seq', width: 70 },
        { field: 'name', title: '工厂名称' },
        { field: 'socialCreditCode', title: '社会信用代码' },
        { field: 'address', title: '工厂地址' },
        { field: 'employees', title: '工厂人数' },
        { field: 'contactName', title: '工厂联系人' },
        { field: 'contactMobile', title: '联系电话' },
        { field: 'relationTypeName', title: '与公司关系' },
        { field: 'annualOutputValue', title: '工厂年产值(万元)', width: 150 },
        { field: 'certificationSystemName', title: '工厂认证体系' },
        { slots: { default: 'operate' }, title: '产品信息' },
    ],
    rowConfig: {
        keyField: 'id',
    },
})

const columns = [
    { title: '序号', type: 'seq', width: 70 },
    { field: 'categoryName', title: '产品类目' },
    { field: 'unit', title: '单位' },
    { field: 'dailyOutput', title: '最大日产量' },
    { field: 'lastAnnualOutput', title: '上年产出' },
]

const infoParams = computed(() => {
    return {
        factoryId: activeId.value,
        page: detailPage.value.currentPage,
        size: detailPage.value.pageSize,
    }
})
const { data: detail } = useGetFactoryInfo(infoParams)
watchEffect(() => {
    if (detail.value) {
        detailList.value = detail.value?.records ?? []
        detailPage.value.total = detail.value?.total ?? 0
    }
})
function view(row: any) {
    activeId.value = row.id
    show.value = true
}
</script>

<template>
    <ElCard>
        <SearchTable v-bind="gridOptions"
                     v-model:pager="tablePage"
                     :data="list"
        >
            <template #operate="{ row }">
                <ElSpace>
                    <span class="text-#409EFF cursor-pointer"
                          @click="view(row)"
                    >
                        查看
                    </span>
                </ElSpace>
            </template>
        </SearchTable>
    </ElCard>

    <el-dialog v-model="show"
               title="产品信息"
               width="800"
    >
        <SearchTable v-bind="{ columns, rowConfig: { keyField: 'id' } }"
                     v-model:pager="detailPage"
                     :data="detailList"
        />
    </el-dialog>
</template>
